<template>
  <div class="home_body">
    <Header />
    <!-- <img
      src="https://omo-oss-image.thefastimg.com/portal-saas/new2023020613173946927/cms/image/d3e645ec-179f-4a55-a317-a1d6d82e4ee2.jpg_1920xaf.jpg"
      class="banner" alt=""> -->
      <img src="../assets/img/channel.jpg" 
      class="banner" alt="">
    <div class="about">
      <div class="about_title">ABOUT US</div>
      <div class="about_title">关于杭州交创</div>
      <!-- <div class="statusFlex">
        <div v-for="item in statusList1" class="statusItem">
          <div class="statusVal">
            {{ item.value }}
          </div>
          <div class="statusName">
            {{ item.name }}
          </div>
        </div>
      </div> -->
      <div class="zhonggong">
        杭州交创有限公司专业从事公路养护技术研发、推广和应用，致力于为公路养护行业提供公路科学养护成套技术与服务，为“公路与桥梁高效养护及安全耐久国家工程研究中心”的共建单位。
      </div>

      <div class="status2Class">
        <div v-for="item in statusList2" class="status2Item">
          <img :src="item.img" class="status2Img" alt="">
          <div class="statusName">
            {{ item.name }}
          </div>
          <div class="statusEng">
            {{ item.engname }}
          </div>
        </div>
      </div>
    </div>
    <div style="font-size: 0px;">
      <img src="../assets/img/img2.png" class="img2class" alt="主营业务">
      <!-- <img src="../assets/img/img1.png" class="img1class" alt="核心能力"> -->
      <!-- <img src="../assets/img/img3.png" class="img3class" alt="新闻中心"> -->
    </div>

    <div class="bottom">
      <div class="bottom_con">
        <div class="status3Class">
          <div v-for="item in bottomList" class="statusItem">
            <div class="itemTitle">
              {{ item.title }}
            </div>
            <div v-for="d in item.data" class="itemText">
              {{ d }}
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div>Copyright 2022-2024 杭州交创科技发展有限公司 All Rights Reserved</div>
        <div>京ICP备09071414号-1</div>
        <a href="https://beian.miit.gov.cn/#/Integrated/index">京公网安备11010839623-17001号</a>
      </div>
    </div>

  </div>
</template>

<script setup>
import Header from '../components/Header.vue';
import { getAssetsFile } from '@/utils/pub.js'
let statusList1 = ref([
  {
    value: '2007',
    name: '公司成立于2007年'
  },
  {
    value: '31',
    name: '业务覆盖全国31个省市'
  },
  {
    value: '100+',
    name: '核心专利数量（核心自主知识产权）'
  },
  {
    value: '3500000+',
    name: '道路养护大数据里程'
  },
])

let statusList2 = ref([
  {
    name: '公司简介',
    engname: 'PROFILE',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2023020613173946927/cms/image/1340dbb4-b5d6-406d-a397-82b1522cbb24.png_186xaf.png',
  },
  {
    name: '组织架构',
    engname: 'PHILOSOPHY',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2023020613173946927/cms/image/6a11e2e1-1ad4-4291-bf32-efa162f8807e.png_186xaf.png',
  },
  {
    name: '企业文化',
    engname: 'CULTURE',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2023020613173946927/cms/image/813c4a8a-3b0e-4dd9-9cdb-976900c0ac57.png_186xaf.png',
  },
  {
    name: '公司视频',
    engname: 'PROFILE',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2023020613173946927/cms/image/edaeebae-a4d1-4bf1-b7fe-cff6b269fcd5.png_186xaf.png',
  },
])

let bottomList = ref([
  {
    title: '公司简介',
    data: ['公司介绍', '组织架构', '企业文化', '视频介绍']
  },
  {
    title: '主营业务',
    data: ['信息化', '装备产品', '决策咨询', '试验测试', '工程应用', '政策研究', '定制化研究']
  },
  {
    title: '核心能力',
    data: ['高端人才队伍', '研发验证条件', '科技创新成果', '标准规范编制', '企业资质证书']
  },
  {
    title: '投资者关系',
    data: ['股市行情', '公司公告', '投资咨询']
  },
])
</script>

<style lang="less" scoped>
.home_body {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;

  .banner {
    height: 694px;
    width: 100%;
  }

  .about {
    padding: 40px 0;
  }

  .about_title {
    text-align: center;
    font-size: 36px;
  }

  .statusFlex {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;

    .statusItem:nth-last-child(1) {
      border: none;
    }

    .statusItem {
      width: 300px;
      text-align: center;
      border-right: 1px solid #eee;

      .statusVal {
        height: 60px;
        line-height: 60px;
        font-size: 44px;
        font-weight: 900;
        text-align: center;
      }

      .statusName {
        margin-top: 10px;
        font-size: 16px;
        color: rgba(112, 112, 112, 1);
        line-height: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

    }
  }

  .zhonggong {
    // text-align: center;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .status2Class {
    max-width: 1240px;
    padding-left: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;

    .status2Item {
      width: 300px;
      text-align: center;

      .status2Img {
        width: 120px;
        height: 120px;
      }

      .statusName {
        font-size: 14px;
        line-height: 24px;
      }

      .statusEng {
        font-size: 12px;
      }
    }
  }

  .img1class {
    width: 100%;
    height: 620px;
  }

  .img2class {
    width: 100%;
    height: 470px;
  }

  .img3class {
    width: 100%;
    height: 960px;
  }

  .bottom {
    background-color: rgba(39, 39, 39, 1);
    padding-top: 50px;
    box-sizing: border-box;
    color: #ffffff;

    .bottom_con {
      width: 98%;
      margin: auto;
      display: flex;
      justify-content: center;
      border-bottom: 2px solid rgba(76, 76, 76, 1);

    }

    .status3Class {
      display: flex;

      .statusItem {
        width: 184.5px;

        .itemTitle {
          font-size: 16px;
          line-height: 1.5;
          margin-bottom: 20px;
          font-weight: 500;
        }

        .itemText {
          color: rgba(178, 178, 178, 1);
          font-size: 14px;
          line-height: 2.5;
        }
      }

    }

    .footer {
      display: flex;
      width: 96%;
      margin: auto;
      justify-content: space-around;
      height: 70px;
      align-items: center;

      div {
        color: rgba(242, 242, 242, 0.7);
        line-height: 2;
        font-size: 14px;
      }

      a {
        color: rgba(242, 242, 242, 0.7);
        line-height: 2;
        font-size: 14px;
      }
    }
  }

}
</style>